<template>
	<view class="page-body">
		<view class="page-section page-section-gap">
			<map style="width: 100vw; height: 100vh;" :scale="14" :latitude="latitude" :longitude="longitude"
				@callouttap="out" :markers="covers" @markertap="mark">
			</map>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require("../../../static/lib/qqmap-wx-jssdk.js")
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 38.814354,
				longitude: 115.492087,
				qqmapsdk: '',
				lat: 0,
				lud: 0,
				name: ""
			}
		},
		methods: {
			onbtn() {
				this.sta = false
			},
			out(e) {
				console.log(e, 11111);
				this.sta = true
			},
			btn() {
				console.log(3333333);
				this.sta = !this.sta
			},
			mark(e) {
				console.log(e.detail.markerId, 22222222);
				let marker = this.covers.find(item => {
					return item.id == e.detail.markerId
				});
				console.log(marker.callout.content);
			},
		},
		onLoad: function(options) {
			this.lat = options.lat
			this.lud = options.lud,
			this.name = options.name
			// 实例化API核心类
			this.qqmapsdk = new QQMapWX({
				key: 'TB7BZ-HKECI-4N6GE-U2BZN-BDQXQ-2ABHE'
			});
			let plugin = requirePlugin('routePlan');
			let key = 'TB7BZ-HKECI-4N6GE-U2BZN-BDQXQ-2ABHE'; //使用在腾讯位置服务申请的key
			let referer = '垃圾'; //调用插件的app的名称
			let endPoint = JSON.stringify({ //终点
				'name': this.name,
				'latitude': this.lat,
				'longitude': this.lud
			});
			wx.navigateTo({
				url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
			});
		},
	}
</script>
<style lang="scss" scoped>
	.page-body {
		width: 100%;
		height: 100vh;

		.page-section page-section-gap {
			width: 100%;
			height: 40vh;
		}

		.bottom {
			width: 100%;
			height: 63vh;
			border-radius: 20px;
			background-color: white;
			position: absolute;
			top: 37%;
			overflow: hidden;

			.top {
				width: 100%;
				height: 8vh;
				text-align: left;
				padding-left: 5vh;
				line-height: 8vh;
				font-weight: 500;
				font-size: 2.5vh;
			}

			.content {
				width: 100%;
				height: 55vh;
				overflow-y: scroll;

				.content1 {
					width: 90%;
					height: 20vh;
					margin: 0 auto;
					display: flex;


					.left {
						width: 50%;
						height: 100%;
					}

					.right {
						width: 100%;
						height: 100%;
						line-height: 5vh;
						margin-top: 2vh;
						margin-left: 1vh;

						.biao {
							display: flex;

							.g0 {
								width: 10%;
								height: 3vh;
								margin-top: 1vh;
								margin-right: 5vh;
								background-color: rgba(255, 94, 129);
								padding: 0.6vh 3vh;
								color: white;
								line-height: 3.5vh;
								font-size: 1.5vh;
								border-top-left-radius: 12px;
								border-bottom-right-radius: 12px;
							}

							.g1 {
								width: 10%;
								height: 3vh;
								margin-top: 1vh;
								padding: 0.6vh 3vh;
								color: white;
								line-height: 3.5vh;
								font-size: 1.5vh;
								border-top-left-radius: 12px;
								border-bottom-right-radius: 12px;
							}

						}
					}
				}
			}
		}
	}
</style>